<template>
    <el-card>
        <div>
            <el-form :inline="true">
                <el-form-item>
                    <el-input v-model="fileName" placeholder="文件名"></el-input>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" show-overflow-tooltip border style="width: 100%">
                <el-table-column label="序号" align="center" width="100">
                    <template #default="{ row, $index }">
                        {{ $index + (currentPage - 1) * pageSize + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="fileName" label="日志文件" show-overflow-tooltip header-align="center" align="center"></el-table-column>
                <el-table-column prop="fileSize" label="大小" show-overflow-tooltip header-align="center" align="center"></el-table-column>
                <el-table-column prop="lastModifiedDate" label="最后更新时间" show-overflow-tooltip header-align="center" align="center"></el-table-column>
                <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
                    <template #default="scope">
                        <el-button type="primary" link @click="downloadHandle(`/sys/log/operate/downloadZip${scope.row.fileName}`,`${scope.row.fileName}.zip`)">
                            下载
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页组件 -->
            <el-pagination
                    @size-change="sizeChangeHandle"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>
    </el-card>
</template>

<script setup lang="ts">
    import {ref, onMounted, computed, watch} from 'vue';
    import service from "@/utils/request";
    import {useCrud} from "@/hooks";

    // 数据
    let fullData: any = [];
    // 数据
    let filteredData: any = ref([]);
    // 数据
    const tableData: any = ref([]);

    // 分页参数
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const fileName = ref('');

    // 处理分页切换
    const handleCurrentChange = (page: number) => {
        currentPage.value = page;
    };

    //页码更新
    const sizeChangeHandle = (val: number) => {
        currentPage.value = 1
        pageSize.value = val
    }

    //查询数据
    const query = () => {
        service.get('/sys/log/operate/file/list', {}).then((res: any) => {
            total.value = res.data.total
            fullData = res.data.list
            filteredData.value = res.data.list
        })
    }

    // 更新表格数据
    const updateTableData = () => {
        const startIndex = (currentPage.value - 1) * pageSize.value;
        const endIndex = startIndex + pageSize.value;
        tableData.value = filteredData.value.slice(startIndex, endIndex);
    };

    // 监听当前页和每页显示条数的变化
    watch([currentPage, pageSize, filteredData], () => {
        updateTableData();
    });

    watch([fileName], () => {
        if (fileName) {
            filteredData.value = fullData.filter((item: { fileName: string | any[]; }) => item.fileName.includes(fileName.value))
            total.value = filteredData.value.length
        }
    })

    // 初始化时加载数据
    onMounted(() => {
        query()
    });

    const {downloadHandle} = useCrud({})
</script>
